<!Doctype html>
<html lang="zh-cmn-Hans">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>静态网页开发学习平台</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="一个简洁、方便、快速、好用、灵活的静态网页开发技术的学习平台。">
  <meta name="keywords" content="静态网页开发，学习平台">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- font-awesome CSS -->
  <link rel="stylesheet" href="../css/font-awesome.min.css">

  <!-- User defined CSS -->
  <link rel="stylesheet" href="../css/style.css">

</head>

<body>
  <header class="fixed-top">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow p-3">

      <!-- Brand -->
      <a class="navbar-brand ml-5" href="#">静态网页开发学习平台</a>

      <!-- Toggler/collapsibe Button -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Navbar links -->
      <div class="collapse navbar-collapse d-flex flex-row justify-content-end mr-5" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item ml-5">
            <a class="nav-link" href="../index.html">首页</a>
          </li>
          <li class="nav-item ml-5">
            <a class="nav-link" href="teach-video.html">教学视频</a>
          </li>
          <li class="nav-item ml-5">
            <a class="nav-link" href="works-display.html">优秀作品</a>
          </li>
          <li class="nav-item ml-5 active">
            <a class="nav-link" href="#my-profile">个人中心</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <section class="container mb-5 pb-5" id="my-profile">
    <div class="row">
      <div class="col-3">
        <div class="border p-3">
          <a href="#">
            <img class="rounded img-fluid px-3" src="../img/head-portrait.png" alt="未找到图片信息">
          </a>
          <div class="d-flex justify-content-around p-2 mx-1 mt-4">
            <i class="icon-github-alt icon-large"></i>
            <i class="icon-flag icon-large"></i>
            <i class="icon-coffee icon-large"></i>
            <i class="icon-globe icon-large"></i>
            <i class="icon-leaf icon-large"></i>
          </div>
        </div>
        <div class="mt-3">
          <h3>
            <span class="p-name d-flex overflow-hidden">乐小猿</span>
            <span class="p-nickname d-flex text-muted">NickName</span>
          </h3>
        </div>
        <div class="p-note d-flex text-dark overflow-hidden mb-3">这家伙很懒，什么都没写。。。</div>
        <a class="btn btn-light btn-block btn-sm my-3 border" href="#" role="button">编&nbsp;辑</a>
      </div>
      <div class="col-9">
        <nav>
          <div class="nav nav-tabs justify-content-between" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-learn-tab" data-toggle="tab" href="#nav-learn" role="tab"
              aria-controls="nav-learn" aria-selected="true">最近<i class="icon-desktop ml-2"></i></a>
            <a class="nav-item nav-link" id="nav-pull-tab" data-toggle="tab" href="#nav-pull" role="tab"
              aria-controls="nav-pull" aria-selected="false">拉取<i class="icon-stethoscope ml-2"></i></a>
            <a class="nav-item nav-link" id="nav-star-tab" data-toggle="tab" href="#nav-star" role="tab"
              aria-controls="nav-star" aria-selected="false">点赞<i class="icon-star ml-2"></i></a>
            <a class="nav-item nav-link" id="nav-heart-tab" data-toggle="tab" href="#nav-heart" role="tab"
              aria-controls="nav-leaf" aria-selected="false">作品<i class="icon-leaf ml-2"></i></a>
            <a class="nav-item nav-link" id="nav-set-tab" data-toggle="tab" href="#nav-set" role="tab"
              aria-controls="nav-set" aria-selected="false">设置<i class="icon-cogs ml-2"></i></a>
          </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" id="nav-learn" role="tabpanel" aria-labelledby="nav-learn-tab">...
          </div>
          <div class="tab-pane fade" id="nav-pull" role="tabpanel" aria-labelledby="nav-pull-tab">...</div>
          <div class="tab-pane fade" id="nav-share" role="tabpanel" aria-labelledby="nav-share-tab">...</div>
          <div class="tab-pane fade" id="nav-star" role="tabpanel" aria-labelledby="nav-star-tab">...</div>
          <div class="tab-pane fade" id="nav-heart" role="tabpanel" aria-labelledby="nav-heart-tab">...</div>
          <div class="tab-pane fade" id="nav-set" role="tabpanel" aria-labelledby="nav-set-tab">...</div>
        </div>
      </div>
    </div>
  </section>

  <footer class="fix-bottom mt-3">
    <div class="jumbotron jumbotron-fluid">
      <div class="container text-center">
        <p>Copyright&copy;2019-4-7 by 乐小猿 版本号：3.0</p>
        <p>本平台内容来自互联网，如内容有侵权，请联系本人删除。&nbsp;&nbsp;<a href="http://www.beian.miit.gov.cn/">鄂ICP备18020158号</a></p>
        <p>联系电话：15897677961 QQ：2775886918 微信：15897677961</p>
      </div>
    </div>
  </footer>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>

</html>